<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<link href="/public/css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="/public/css/H-ui.admin.css" rel="stylesheet" type="text/css" />
<link href="/public/skin/default/skin.css" rel="stylesheet" type="text/css" />
<link href="/public/lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" />
<link href="/public/css/style.css" rel="stylesheet" type="text/css" />
<link href="/public/css/jPages.css" rel="stylesheet" type="text/css" />
<link href="/public/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />


<script type="text/javascript" src="/public/js/utils/jquery-1.10.2.min.js"></script> 
<script type="text/javascript" src="/public/lib/bootstrap-modal/2.2.4/bootstrap-modal.js"></script>
<script type="text/javascript" src="/public/lib/bootstrap-modal/2.2.4/bootstrap-modalmanager.js"></script>
<script type="text/javascript" src="/public/lib/layer/1.9.3/layer.js"></script>
<script type="text/javascript" src="/public/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="/public/lib/My97DatePicker/WdatePicker.js"></script> 
<script type="text/javascript" src="/public/lib/datatables/1.10.0/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="/public/js/H-ui.js"></script> 
<script type="text/javascript" src="/public/js/jPages.js"></script> 
<script type="text/javascript" src="/public/js/H-ui.admin.js"></script> 
<script type="text/javascript" src="/public/lib/Validform/5.3.2/Validform.min.js"></script> 
<script type="text/javascript" src="/public/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script> 
<script type="text/javascript" src="/public/js/jquery.form.js"></script> 
<script type="text/javascript" src="/public/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="/public/js/ajaxfileupload.js"></script>
<script type="text/javascript" src="/public/js/picbox.js"></script>
<script type="text/javascript" src="/public/js/lightbox.js"></script>

<script type="text/javascript" src="/public/js/utils/util.js"></script>
<script type="text/javascript" src="/public/js/utils/jquery.cookie.js"></script>

<title>理财产品列表</title>
</head>
<body>
		<div id="tab_demo" class="HuiTab">
			  <div class="myTabBar cl">
			  	<span class="current first">热门推荐</span>
			  	<span>新手专区</span>
			  	<span>活期</span>
			  	<span>定期</span>
			  	<span>复投专区</span>
			  	<span>机构专区</span>
			  </div>
			  <table class="table table-border table-bordered table-hover table-bg ">
				<thead>
					<tr class="text-c">
						<th width="10">ID</th>
						<th width="100">产品名称</th>
						<th width="100">所属金融公司</th>
						<th width="80">产品类型</th>
						<th width="80">合作方式</th>
						<th width="100">起投金额</th>
						<th width="30">官方收益率</th>
						<th width="30">首投补贴（%）</th>
						<th width="30">复投补贴（%）</th>
						<th width="80">推广总数</th>
						<th width="80">已售总数</th>
						<th width="40">上架状态</th>
						<th width="40">产品状态</th>
						<th width="40">推荐状态</th>
						<th width="100">产品期限</th>
					</tr>
				</thead>
					<tbody>
						<tr class="text-c">
								<td>1</td>
								<td>快快贷</td>
								<td>xxx</td>
								<td>单一</td>
								<td>数据对接</td>
								<td>222元</td>
								<td>90.0%</td>
								<td>0.22</td>
								<td>0.23</td>
								<td>123423</td>
								<td>23243</td>
								<td>上架</td>
								<td>已售罄</td>
								<td>推荐</td>
								<td>2016年06月02日~2016年06月03日</td>
							</tr>
					</tbody>
				</table>
		</div>
	<script type="text/javascript">
		$(function(){
			/***tab切换***/
			$(".myTabBar span").on("click",function(){
				$(".myTabBar span").removeClass("current");
				$(this).addClass("current");
			});
			
			/**点击修改**/
			$("body").on("dblclick","tbody tr td:first-child",function(){
				var index = $(this).text();
				var input = "<input type='text' class='editInput' value='"+ (index) +"' />";
				$(this).text("").append(input);
				$(this).children("input").focus();
			});
			//输入框触发change事件
			$("body").on("change",".editInput",function(){
				alert("调用修改顺序的接口");
			});
			//输入框失去焦点
			$("body").on("blur",".editInput",function(){
				var value = $(this).val();
				$(this).parent("td").text("").text(value);
			});
		});
	</script>
</body>
</html>